<!DOCTYPE html>
<!-- 讲座详情页面 -->
<!-- author: 豆豆 -->
<!-- 2020/6/30 -->
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<script src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../../Common/js/lib/materialize.min.js"></script>
		<script src="../../Common/js/tools.js"></script>
		<script src="../../Common/js/jump.js"></script>
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="../../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="../../Common/css/ufun.css" />
		<link rel="stylesheet" href="../../Common/css/summernote-fix.css" />
		<link rel="stylesheet" href="../../Common/css/detail-page.css" />
		<style type="text/css">
			#TopAdsBar {
				width: 100%;
				height: 16vw;
				background: var(--color-white);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 3vw;
				padding-right: 6vw;
			}
			
			#HanShuAdsLogo {
				height: 15vw;
			}
			
			#DownloadHanshu {
				background: var(--color-yellow);
				height: 8vw;
				width: 22vw;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 2vw;
				size: 4vw;
			}
			
			#QuestionInfoBar {
				background: var(--color-gray-white);
				height: 20vw;
				align-items: center;
				display: flex;
			}
			
			#LeftYellowPart {
				width: 40%;
				height: 10vw;
				background: var(--color-yellow);
				align-items: center;
				display: flex;
				padding-left: 6vw;
			}
			
			#RightGrayPart {
				width: 60%;
				height: 10vw;
				background: var(--color-gray-dark);
				align-items: center;
				display: flex;
				justify-content: flex-end;
			}
			
			.right {
				height: inherit;
				align-items: center;
				display: flex;
				padding-right: 6vw;
			}
			
			.right span{
				color: var(--color-gray-white);
				height: 8vw;
				align-items: center;
				display: flex;
				margin-right: 2vw;
			}
			
			#Reward {
				height: 7vw;
				width: 14vw;
				border-radius: 1.5vw;
				float: right;
				margin-left: 1.7vw;
				font-weight: 600;
				font-size: 4vw;
				line-height: 6vw;
				color: var(--color-white);
				background-color: var(--color-yellow);
				text-shadow: 0 0 1px sandybrown;
			}
			
			.lecture-head {
				background-color: var(--color-white);
				padding: 5vw;
			}

			#LectureCover {
				width: 22vw;
				height: 22vw;
				border-radius: 2vw;
				margin-right: 4vw;
				flex-shrink: 0;
				background-color: var(--color-gray-dark);
			}

			#LectureCover img {
				width: 100%;
				height: 100%;
			}

			#LectureTitle {
				position: relative;
				display: flex;
				font-weight: 700;
				font-size: 5.5vw;
				margin: 0vw 0vw 1vw 0vw;
			}

			.lecture-head-info {
				display: flex;
				align-items: flex-start;
				position: relative;
			}


			#SchoolName {
				font-style: italic;
			}
			
			.content {
				padding-top: 0 !important;
			}
			
			.lecture-info {
				text-align: center;
				display: flex;
				font-size: 3vw;
				align-items: center;
				font-weight: 400;
			}

			#InfoDivider {
				width: 1vw;
				height: 1vw;
				background: var(--color-gray-dark);
				-moz-border-radius: 20vw;
				-webkit-border-radius: 20vw;
				border-radius: 20vw;
				margin: 2vw;
			}

			#Recommend {
				color: var(--color-gray-dark);
			}

			#RecommendNum {
				color: var(--color-gray-dark);
			}

			#View,
			#ViewNum {
				color: var(--color-gray-dark);
			}

			.time-and-price {
				display: flex;
				font-size: 3vw;
				position: relative;
				align-items: center;
				justify-content: space-between;
				margin-top: 2vw;
			}

			.read-time-info {
				display: flex;
				font-weight: 300;
				color: var(--color-gray-medium);
				align-items: center;
			}

			.lecture-price-container {
				text-align: center;
				align-items: center;
				justify-content: center;
				width: 12vw;
				height: 6vw;
				background: var(--color-yellow);
				border-radius: 1vw;
			}

			#PriceContainer {
				height: inherit;
				width: inherit;
				text-align: center;
				justify-content: center;
				display: inline-flex;
			}

			#Price {
				color: var(--color-gray-dark);
				font-weight: 600;
				font-size: 3.5vw;
			}

			#PriceUnit {
				color: var(--color-gray-dark);
				font-weight: 600;
				font-size: 3.5vw;
			}

			/* 这部分是讲座介绍中间这部分的CSS */
			.lecture-intro {
				background-color: var(--color-white);
				padding: 5vw;
				margin: 2vw auto 0;
			}

			#DescriptionTitle,
			#InstructorTitle,
			.lecture-content {
				font-size: 4vw;
				font-weight: 500;
			}

			#DescriptionContent {
				color: var(--color-gray-medium);
				font-size: 3.5vw;
				font-weight: 400;
				margin: 2vw 2vw;
			}

			.instructor-info-container {
				align-items: center;
				display: flex;
				justify-content: space-between;
			}


			#InstructorProfilePic {
				width: 12vw;
				height: 12vw;
				background: var(--color-gray-dark);
				-moz-border-radius: 20vw;
				-webkit-border-radius: 20vw;
				border-radius: 20vw;
				margin: 2vw 0vw;
				display: flex;
				float: left;
			}

			#InstructorName {
				font-size: 4vw;
				margin-left: 3vw;
				position: relative;
				display: flex;
			}

			.subscript-container {
				background: var(--color-yellow);
				width: 14vw;
				height: 6vw;
				text-align: center;
				align-items: center;
				border-radius: 2vw;
				font-size: 1.5vw;
				display: inline-flex;
				justify-content: center;
			}

			.InstructorPart {
				align-items: center;
				display: inline-flex;
			}

			.subscript-container img {
				width: 14vw;
			}


			.personal-profile {
				color: var(--color-gray-medium);
				font-weight: 400;
				margin: 1vw 1vw;
				font-size: 3.5vw;
			}

			/* 讲座内容部分 */
			.lecture-content {
				background-color: var(--color-white);
				padding: 5vw;
				margin: 2vw auto;
				width: 100%;
			}

			.content-title {
				font-weight: 500;
			}

			#LecText {
				color: var(--color-gray-medium);
				font-weight: 400;
				margin: 2vw 0vw;
				display: none;
				overflow-y: hidden;
			}

			#HideContent {
				background-color: var(--color-white);
				width: 100%;
				padding: 2vw 4vw;
				margin: 2vw auto;
				display: none;
				justify-content: center;
			}

			#HideContent span {
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--color-gray-dark);
				font-size: 3.8vw;
				height: 8vw;
				border-bottom: 1px solid var(--color-gray-dark);
			}

			#lecLecerHeadImgLoc {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		</style>
	</head>

	<body>
		<div id="TopAdsBar">
			<img src="../../Question/img/HanShuAdsLogo.png" id="HanShuAdsLogo">
			<div id="DownloadHanshu">下载 APP</div>
		</div>
		
		<div id="QuestionInfoBar">
			<div id="LeftYellowPart">
				<div class="lecture-info">
					<div id="RecommendNum">322</div>
					<div id="Recommend">&nbsp;推荐</div>
					<div id="InfoDivider"></div>
					<div id="ViewNum">322</div>
					<div id="View">&nbsp;阅读</div>
				</div>
			</div>
			
			<div id="RightGrayPart">
				<div class="right">
					<span>价格</span>
					<div class="lecture-price-container">
						<div id="PriceContainer">
							<div id="Price">1</div>
							<div id="PriceUnit">&nbsp;元</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="content">
			<!-- 讲座页面的头部信息 -->
			<div class="lecture-head">
				<div class="lecture-head-info">
					<div id="LectureCover">
						<img src="">
					</div>
					<div id="HeadRightPart">
						<div id="LectureTitle">
							讲座的标题讲座的标题讲座的标题讲座的标题
						</div>
					</div>
				</div>

				<!-- 这部分的数字和后面的字是分开的，直接获取修改数字 -->
				<div class="time-and-price">
					<div class="read-time-info">
						<div>阅读时间约为</div>
						<!-- 下面这个id ReadTime是阅读时间 -->
						<div id="ReadTime">10</div>
						<div id="ReadTimeUnit">分钟</div>
					</div>

				</div>
			</div>

			<!-- 讲座页面的中间部分，讲座介绍和讲师介绍 -->
			<div class="lecture-intro">
				<div class="lecture-description">
					<div id="DescriptionTitle">讲座介绍</div>
					<div id="DescriptionContent">这句话的位置是介绍讲座的内容这句话的位置是介绍讲座的内容</div>
				</div>
				<hr>
				<div class="InstructorInfo">
					<div id="InstructorTitle">讲师介绍</div>
					<div class="instructor-info-container">
						<div class="InstructorPart">
							<div id="InstructorProfilePic">
								<img src="" id="lecLecerHeadImgLoc">
							</div>
							<div id="InstructorName">用户名</div>
						</div>

					</div>

					<div class="personal-profile">
						用户的个人简介
					</div>
				</div>
			</div>

			<!-- 讲座页面的内容部分，讲座的内容 -->
			<div class="lecture-content">
				<div id="content-title">
					讲座内容
				</div>
				<div class="the-content" id="LecText">
					讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容
					讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容
					讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容
					讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容
					讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容
					讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容讲座内容
				</div>
				<!-- 未付费时，显示的“隐藏内容”卡片 -->
				<div id="HideContent">
					<span>讲座内容已被隐藏，请付费查看正文</span>
				</div>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		var lecId;
		$(document).ready(function(){
			$.ajax({
				url: 'http://rickonono3.top:13809/',
				data: {
					"lecId": lecId
				},
				dataType: 'json',
				type: 'post',
				success: function(data) {
					if (data["res"] == "ok"){
						$('#RecommendNum').text(data["lecLikedCnt"]);
						$('#ViewNum').text(data["lecLookedCnt"]);
						$('#Price').text(data["lecCharge"]);
						$('#LectureTitle').text(data["lecTitle"]);
						$('#LectureCover').attr('src', SERVER_LOC + data["lecCoverImg"]);
						$('#lecLecerHeadImgLoc').attr('src', SERVER_LOC + data["lecLecerHeadImgLoc"]);
						$('#InstructorName').text(data["lecLecerNick"]);
						$('.personal-profile').html(data["lecLecerIntro"]);
						$('#DescriptionContent').html(data["lecIntro"]);
						$('#ReadTime').text(data["lecReadTime"]);
						$('#LecText').html(data["lecText"]);
						if (data["lecCharge"] == 0) {
							data["lecCharge"] = '免费';
							let oDiv = document.querySelector("#PriceUnit");
							oDiv.parentElement.removeChild(oDiv);
						}
					}			
				},
				error: function(res) {
					console.log("error");
				},
			});
		});	
	</script>
</html>
